import React from 'react'
import {withRouter} from 'react-router-dom'
import { Layout, Menu } from 'antd';

const { Header, Content, Footer } = Layout;

 class Homes extends React.Component {

    constructor(){
        super()
        this.state={
            nav:['生命周期','props通信','上下文通信','redux','react-redux','hooks','函数式组件']
        }
    }
     goto=(index)=>{
         let link='life'
         switch (index) {
             case 0:
                 link='life';break;
             case 1:
                 link='props';break;
             case 2:
                 link='cont';break;
             case 3:
                 link='redux';break;
             case 4:
                 link='react-redux';break;
             case 5:
                 link='hooks';break;
             case 6:
                 link='func';break
             default:
                 break;
         }
       this.props.history.push(`/home/${link}`)
    }
    render() {
        let {nav} =this.state
        return <Layout className="layout">
                <Header>
                    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['生命周期']}>
                        {nav.map((item,index)=>{
                            return <Menu.Item  key={item} onClick={ev=>{this.goto(index)}}>{item}</Menu.Item>
                        })}
                    </Menu>
                </Header>
                <Content style={{ padding: '0 50px' }}>
                  {this.props.children}
                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        
    }
}
export default withRouter(Homes)